<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<link rel="stylesheet" media="screen" href="css/docs.css" />
<link rel="stylesheet" media="screen"
	href="lib/jqplot/jquery.jqplot.min.css" />
<!-- jQplot SETUP -->
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/jqplot/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="lib/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.donutRenderer.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.bubbleRenderer.min.js"></script>
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css" />
<script type="text/javascript"
	src="lib/datatables/js/jquery.dataTables.js"></script>


<script type="text/javascript">
    function initChart(profits,tickslabel) {
	 	/*var profits = [ 87.65, 98.40, 65.39, 93.20, 78.00, 67.98,
				78.45, 89.56, 87.10, 69.56, 96.20, 100 ];
		var tickslabel = [ '一月', '二月', '三月', '四月', '五月', '六月', '七月',
				'八月', '九月', '十月', '十一月', '十二月' ];*/
		var ylabel = [ 'Profits' ];

		//line with some options
		var chart2 = $.jqplot('chart2', [ profits ], {
			title : '考核历史数据',
			legend : {
				show : true,
				labels : [ '定量考核' ],
				location : 'ne'
			},
			axes : {
				xaxis : {
					renderer : $.jqplot.CategoryAxisRenderer,
					ticks : tickslabel
				},
				yaxis : {
					tickOptions : {
						formatString : '%.2f 分'
					}
				}
			},
			highlighter : {
				show : true,
				sizeAdjust : 7.5,
				tooltipAxes : 'y'
			},
			cursor : {
				show : false
			}
		});
	}

    var periodIds = null; //保存所列出来的周期id列表
    var periodNames = null; //保存所列出来的周期id所对应的周期名
    var scores = null; //保存所列出来的周期id所对应的得分
    //点击chart节点回调事件
    function tooltip_callback(score, index){
        if(periodIds != null && periodIds.length > 0){
            var periodId = periodIds[index];
            var data = {"work.id":"${work.id}","periodId":periodId};
            getScoreDetails(data, index);
        }
    }

    //得到具体某个周期的得分详细
    function getScoreDetails(data, index){
        $.ajax({
            type:"post",
            url:"/exam/quan_histroy_details.xhtml",
            data: data,
            dataType:"html",
            cache:false,
            success:function(a) {
                $("#details_div").html(a)
                $("#current_period_score").html(scores[index]);
                $("#current_period_title").html(periodNames[index]+"考核项目明细分值");
            },
            complete:function(b) {
            }
        });

    }

    function getChartDatas(yearType){
        var year = new Date().getFullYear();
        if(yearType == 2){
            year = year-1;
        }
		$.ajax({
	        type:"post",
	        url:"/ajax/quan_histroy_scores.xhtml?type=${type}&work.id=${work.id}&year="+year,
	        //data: "name=John&location=Boston",
	        dataType:"json",
	        success:function (data) {
	        	if(data != null && data.length > 0){
                    scores = data[0];
                    periodNames = data[1];
                    periodIds = data[2];
                    $("#chart2").html("");
                    initChart(scores, periodNames);
                    tooltip_callback(0, periodIds.length-1);//默认列出最后一期
                }else{
                    $("#chart2").html("");
                    $("#current_period_details").html("");
                    $("#current_period_title").html("没有考核数据");
                }
	        }
	    });
	}
	$(document).ready(function(){
        getChartDatas(1);
	});
</script>
<!-- jQplot SETUP END -->
<h1 class="page-title">定量考核-考核历史浏览-查看全年分数</h1>
<div class="container_12 clearfix">
	<section class="portlet grid_12 leading docs">
		<header>
			<h2>定性考核打分</h2>
		</header>
		<section>

			<DIV class="portlet">
				<header>
					<h5_n>${work.baseId.name}</h5_n>
					<h2>
						<s:if test="#request.work.baseId.sex == \"0\"">先生</s:if>
						<s:else>女士</s:else>
					</h2>
				</header>
				<section class="clearfix">


					<div class="grid_2 alpha" style="text-align: center">
						<img src="${work.baseId.facePath}" width="120"
							height="135" onerror="this.src='${ctx}/images/Avatar.jpg'" />

					</div>
					<div class="grid_3">
						<dl>
							<dt>岗位</dt>
							<dd>
								<h6>${work.duty.dutyName}</h6>
							</dd>
							<dt>员工号</dt>
							<dd>
								<h6>${work.workNo}</h6>
							</dd>
							<dt>职等</dt>
							<dd>
								<h6>${work.grade.gradeName}</h6>
							</dd>
						</dl>
					</div>
					<div class="grid_3">
						<dl>
							<dt>部门</dt>
							<dd>
								<h6>${work.organization.fullName}</h6>
							</dd>
							<dt>职务</dt>
							<dd>
								<h6>${work.duty.dutyName}</h6>
							</dd>
							<dt>职级</dt>
							<dd>
								<h6>${work.gradeLevel.gradeSort}</h6>
							</dd>
						</dl>
					</div>
					<div class="grid_3 omega">
						<dl>
							<dt>工龄</dt>
							<dd>
								<h6>${work.workAge}</h6>
							</dd>
							<dt>考核记录</dt>
							<dd>
								<h6>92分</h6>
								<select id="year_sel" style="opacity: 0;" onchange="getChartDatas(this.value)">
									<option value="1">显示本年度</option>
									<option value="2">显示上年度</option>
									<option value="-1">显示全部</option>
								</select>
							</dd>

						</dl>
					</div>
				</section>
			</DIV>

			<div class="leading">
				<div class="jqPlot" id="chart2" style="width: 100%; height: 200px;"></div>
			</div>
			<div class="clear"></div>
			<div class="leading" id="details_div"></div>
			<h4>&nbsp;</h4>
		</section>
	</section>
</div>
